<template>
  <div>
    <!-- 搜索栏 -->
    <a-row>
      <a-col :span="12"  class='mb20' >
          <a-input  placeholder="请输入产品名称"  class='w200'  v-model='search.keyWord'/>
          <a-button type="primary"  @click='pageInit()'>搜索</a-button>
      </a-col>
      <!-- 操作按钮 -->
      <a-col :span='4'  style='float: right;'>   
            <a-button type="primary" icon="plus-circle"  @click='addProperty'>新建</a-button> 
        </a-col> 
    </a-row>
  
  
  <!-- 表格切换 -->
    <a-tabs v-model='search.type' @change="productChange"  type='card'  animated>
        <a-tab-pane tab="定向融资类" key="1"></a-tab-pane>
        <a-tab-pane tab="商票资产类" key="2" ></a-tab-pane> 
        <a-tab-pane tab="应收账款类" key="3" ></a-tab-pane> 
        <a-tab-pane tab="其他类" key="4" ></a-tab-pane> 
    </a-tabs>
    <a-spin   :indicator="indicator"  tip="正在加载中..."  :spinning='spinning'  :delay="delayTime">
      <a-table :columns="columns" :dataSource="data"  :rowKey="record => record.code" :pagination="pagination"  @change="handleTableChange">

        <span slot="type"  slot-scope="text, record">{{text | propertyType}}</span>
        <span slot="release"  slot-scope="text, record">{{text | formatDates}}</span>
        <span slot="createTime"  slot-scope="text, record">{{text | formatDate}}</span>

        <span slot="action" slot-scope="text, record">
           <router-link  :to='{path:"/property/info",query:{code:record.code}}'  class='color-blue'> 详情</router-link>
          <a-divider type="vertical" />
          <router-link  :to='{path:"/property/edit",query:{code:record.code}}'  class='color-blue'> 编辑 </router-link>
          <a-divider type="vertical" />
          <a-popconfirm title="确认删除当前数据？" @confirm="confirmDel(record.code)"   okText="确认" cancelText="取消">
              <a href="javascript:;"  class='color-red'>删除</a>
          </a-popconfirm>
        </span>
      </a-table>
    </a-spin>
  </div>
</template>

<script>
import { listProperty,delproperty }  from  '@/api/property/index'
export default {
  name: 'property',
  data () {
    return {
      spinning:false,
      indicator:<a-icon type="loading-3-quarters"  spin  style="{ fontSize: '16px' }"/> ,
      delayTime:1000,
      /*表格栏*/
        columns:[{
        dataIndex: 'name',
        key: 'name',
        title:'资产名称',
        slots: { title: 'customTitle' }, 
      },  {
        title: '项目类型',
        dataIndex: 'type',
         scopedSlots: { customRender: 'type' },
      }, {
        title: '规模（万元）',
        dataIndex: 'prjSize',
      }, {
        title: '发行方',
        dataIndex: 'issuer',
      },  {
        title: '创建人',
        dataIndex: 'createUserName',
      },
      {
        title: '创建时间',
        dataIndex: 'createTime',
        scopedSlots: { customRender: 'createTime' },
      },  
      {
        title: '操作',
        key: 'action',
        scopedSlots: { customRender: 'action' },
      }],
    /*data 切换显示*/
    data:[], 
    search:{
      keyWord:'',
      pageNo:1,
      pageSize:10,
      type:'1',/*利用type 与tab值统一 获取不同的list*/
    }, 
    pagination:{
          total:0,
          pageSize: 10,//每页中显示10条数据
          showSizeChanger: true,

          pageSizeOptions: ["10", "20"],//每页中显示的数据
          showTotal: total => `共有 ${total} 条数据`,  //分页中显示总的数据
        },                                                                                         
    }
  },
  created(){
    let hashIndex = this.$route.hash.slice(1)
    this.search.type = hashIndex ? hashIndex :'1'
    this.pageInit()
  },
  methods:{
    async pageInit(){ 
      this.spinning = true
      await listProperty(this.search).then((res)=>{
        if(res.data.flag == true){
          this.data = res.data.dataList
          this.pagination.total = res.data.totalRs
        }
          this.spinning = false
      })
      
    },
    addProperty(){
      this.$router.push('/property/add#'+this.search.type)
    },
    confirmDel(code){
      delproperty(code).then((res)=>{
        if(res.data.flag == true){
          this.$message.success(res.data.msg)
          this.pageInit()
        }
      })
    },
    productChange(val){ 
      this.search.keyWord = ''
      this.search.type = val
      this.search.pageNo = 1
      this.search.pageSize = 10
      this.pageInit()
    },
     /*table页数变化*/
    handleTableChange (pagination, filters, sorter) {
        // console.log(pagination);
        this.search.pageNo = pagination.current
        this.search.pageSize =pagination.pageSize
        this.pageInit()
    }, 
    
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped> 
</style>
